<!DOCTYPE html>
<html>
<style>
body {
        margin:0;
        overflow: hidden;
        width: 450px;
}

#marker {
        margin: 0px auto;
        width: 278px;
        margin-top: 100px;
}
</style>
<body>
        <div id="marker">
        </div>

        <script src="vendor/aruco-marker.js"></script>
        <script>
        if( location.hash ){
                var id = parseInt(location.hash.substr(1), 10)
        }else{
                var id = Math.floor(Math.random() * 1024);
        }

        var element = document.getElementById('marker');
        element.innerHTML = '<p>ID: ' + id + '</p>' + (new ArucoMarker(id).toSVG('300px'));
        </script>
</body>
</html>
